<!--
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <t-dialog
    v-if="visible"
    width="433px"
    :header="$t('请先登录')"
    :visible="visible"
    destroy-on-close
    :footer="false"
    :close-btn="false"
  >
    <login-form />
    <t-button style="width: 100%; margin-top: 12px" theme="default" @click="onLogout">{{ $t('退出') }}</t-button>
  </t-dialog>
</template>
<script lang="ts">
export default {
  name: 'LoginModal',
};
</script>
<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { message } from '@/soar';
import { useAccountStore } from '@/store';
import { logout } from '@/api/account';
import LoginForm from './LoginForm.vue';

const accountStore = useAccountStore();
const router = useRouter();
// 用户id
const visible = computed(() => accountStore.loginModalVisible);

function onLogout() {
  message.confirm('确定退出登陆吗？').then(() => {
    logout();
    router.push('/login');
  });
}
</script>

<style lang="less" scoped>
.login-form {
  .login-btn {
    width: 100%;
    margin-top: 30px;
  }
}
.el-overlay {
  color: red;
}
</style>
